

const myMainDom = document.getElementById('myMain');
const myMain = echarts.init(myMainDom);

let gaugeData = [
    {
        value: 20,
        name: '加分',
        title: {
            offsetCenter: ['0%', '-60%']
        },
        detail: {
            valueAnimation: true,
            offsetCenter: ['0%', '-45%']
        }
    },
    {
        value: 40,
        name: '任务分',
        title: {
            offsetCenter: ['0%', '-25%']
        },
        detail: {
            valueAnimation: true,
            offsetCenter: ['0%', '-10%']
        }
    },
    {
        value: 60,
        name: '课程分',
        title: {
            offsetCenter: ['0%', '10%']
        },
        detail: {
            valueAnimation: true,
            offsetCenter: ['0%', '25%']
        }
    },
    {
        value: 60,
        name: '总评',
        title: {
            offsetCenter: ['0%', '45%']
        },
        detail: {
            valueAnimation: true,
            offsetCenter: ['0%', '60%']
        }
    }
];
option = {
    title: {
        text: '等分表',
        left: 'center'
    },
    series: [
        {
            type: 'gauge',
            radius: '70%',
            startAngle: 90,
            endAngle: -270,
            pointer: {
                show: false
            },
            progress: {
                show: true,
                overlap: false,
                roundCap: true,
                clip: false,
                itemStyle: {
                    borderWidth: 1,
                    borderColor: '#464646'
                }
            },
            axisLine: {
                lineStyle: {
                    width: 40
                }
            },
            splitLine: {
                show: false,
                distance: 0,
                length: 10
            },
            axisTick: {
                show: false
            },
            axisLabel: {
                show: false,
                distance: 50
            },
            data: gaugeData,
            title: {
                fontSize: 14
            },
            detail: {
                width: 50,
                height: 14,
                fontSize: 14,
                color: 'inherit',
                borderColor: 'inherit',
                borderRadius: 20,
                borderWidth: 1,
                formatter: '{value}%'
            }
        }
    ]
};

option && myMain.setOption(option);
